---
import BaseHead from '../components/BaseHead.astro';
import Footer from '../components/Footer.astro';
import Counter from '../components/Counter.svelte';
import Header from '../components/Header.astro';
import HTML from '../layouts/HTML.astro';
import * as m from "../paraglide/messages.js"
---

<HTML>
	<head>
		<BaseHead title={m.site_title()} description={m.site_description()} />
	</head>
	<body>
		<Header title={m.site_title()} />
		<main>
			<h1>🧑‍🚀 Hello, Astronaut!</h1>
			<p>
				This Example aims to help you integrate Paraglide with your Multi-Language
				Astro app. Paraglide is a great fit for the interactive parts of your app,
				like forms, app-shells, or this counter:
			</p>
			<Counter client:load />
			<p>
				Because Paraglide treeshakes very well, each island only ships the message it actually 
				uses. This means that you can use Paraglide in your app without worrying about 
				the size of your JS bundle. It can get as small as 100 bytes!
			</p>

			<p>
				So feel free to look around this example and see how Paraglide can help you,
				or read <a href="https://inlang.com/g/utqgkmzp/guide-lorissigrist-buildAGlobalAstroApp">the written guide over on Paraglide's website.</a>
			</p>
		</main>
		<Footer />
	</body>
</HTML>